<template>
    <div class="app-container">
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="220px" class="sidebar">
                <div class="sidebar-header">
                    <el-upload class="user-info" action="http://127.0.0.1:8000/update_userimg/" :show-file-list="false" :auto-upload="true"
                        :on-success="handleSuccess" :before-upload="beforeUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" title="更换头像"/>

                        <el-icon v-else>
                            <Plus />
                        </el-icon>

                    </el-upload>
                    <div class="user-details">
                        <div class="user-name">{{ userInfo.username || '未登录' }}</div>
                        <div class="user-role">{{ userInfo.role || '普通用户' }}</div>
                    </div>
                </div>
                <!-- 其余菜单代码保持不变 -->
                <el-menu :default-active="activeMenu" class="el-menu-vertical" @select="handleMenuSelect"
                    :router="true">
                    <el-menu-item index="/home/teacher">
                        <i class="el-icon-user"></i>
                        <span>讲师管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/employment">
                        <i class="el-icon-briefcase"></i>
                        <span>就业管理</span>
                    </el-menu-item>
                    <el-menu-item index="/home/college">
                        <i class="el-icon-office-building"></i>
                        <span>院校管理</span>
                    </el-menu-item>
                    <el-submenu index="manage">
                        <template #title>
                            <i class="el-icon-setting"></i>
                            <span>用户管理</span>
                        </template>
                        <el-menu-item index="permissionManage">
                            <i class="el-icon-key"></i>
                            <span>用户管理</span>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <!-- 主内容区保持不变 -->
            <el-container>
                <el-header class="header">
                    <div class="header-title">
                        {{ menuTitles[activeMenu] || '用户管理' }}
                    </div>
                </el-header>
                <el-main class="main-content bg-white">
                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { RouterView } from 'vue-router'

const route = useRoute()
const router = useRouter()
const activeMenu = ref('/home/teacher')
const userInfo = ref({})
const showAvatarOverlay = ref(false) // 控制头像悬停层显示

const imageUrl = ref('https://tse2-mm.cn.bing.net/th/id/OIP-C.6vv4xpcrIHUo6gqnyP01GAHaFj?rs=1&pid=ImgDetMain')


// 菜单标题映射
const menuTitles = {
    '/home/teacher': '讲师管理',
    '/home/employment': '就业管理',
    '/home/college': '院校管理',
    '/home/permissionManage': '用户管理'
}

// 上传前校验
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
    const isImage = ['image/jpeg', 'image/png'].includes(file.type)
    const isLt2M = file.size / 1024 / 1024 < 2
    console.log(file);
    
    if (!isImage) {
        ElMessage.error('仅支持JPG/PNG格式!')
        return false
    }
    if (!isLt2M) {
        ElMessage.error('图片大小不能超过2MB!')
        return false
    }
    return true
}

// 上传成功处理
const handleSuccess = (response) => {
    imageUrl.value = response.url
    console.log(imageUrl.value);
    
    ElMessage.success('上传成功!')

    // 可选：立即保存到用户信息
    // http.post('user/useroper/', {
    //     type: 'img',
    //     img: response.url
    // })
}

// 获取用户信息
const fetchUserInfo = async () => {
    try {
        userInfo.value = {
            id: 1,
            username: '17763438143',
            avatar: '@/assets/default.png',
            role: '管理员'
        }
    } catch (error) {
        ElMessage.error('获取用户信息失败')
        console.error(error)
    }
}

// 处理菜单选择
const handleMenuSelect = (index) => {
    activeMenu.value = index
}

onMounted(() => {
    router.push('/home/teacher')
    fetchUserInfo()
})
</script>

<style scoped>
/* 侧边栏样式 */
.sidebar {
    background-color: #f5f7fa;
    height: 100vh;
}

.sidebar-header {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #e6e9ed;
}

.user-info {
    img {
        width: 120px;
        height: 120px;
        object-fit: cover;
        border-radius: 50%;
    }

}
.user-details {
    margin-top: 10px;
    text-align: center;
}

.user-name {
    font-weight: 500;
    font-size: 16px;
}

.user-role {
    font-size: 12px;
    color: #909399;
    margin-top: 4px;
}

/* 头像容器样式 */
.avatar-container {
    position: relative;
    cursor: pointer;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
}

/* 头像悬停层样式 */
.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    transition: all 0.3s ease;
}

/* 其余样式保持不变 */
.header {
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.header-title {
    font-size: 18px;
    font-weight: 500;
}

.main-content {
    padding: 20px;
    overflow-y: auto;
}

.empty-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.empty-message {
    text-align: center;
    padding: 20px;
    border-radius: 4px;
    background-color: #fafafa;
    border: 1px solid #ebeef5;
}

.empty-message p {
    margin: 10px 0;
    color: #909399;
}
</style>